<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">

        <form id="config-form" class="edit-form form-horizontal" role="form" data-toggle="validator" method="POST"
            action="">

            <div class="alert {$addon.tips.extend|default='alert-info-light'}" style="margin-bottom:10px;">
                {:__('Configuration of the public!')}
            </div>
            <div class="container">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th width="15%">{:__('Title')}</th>
                            <th width="85%">{:__('Value')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $loupan_config as $item}
                        <tr>
                            <td>{:__($item.title)}</td>
                            <td>
                                <div class="row">
                                    <div class="col-sm-8 col-xs-12">
                                        {switch $item.type}
                                        {case string}
                                        <input {$item.extend} type="text" name="row[{$item.name}]"
                                            value="{$item.value|htmlentities}" class="form-control"
                                            data-rule="{$item.rule}" data-tip="{$item.tip}" />
                                        {/case}
                                        {case text}
                                        <textarea {$item.extend} name="row[{$item.name}]" class="form-control"
                                            data-rule="{$item.rule}" rows="5"
                                            data-tip="{$item.tip}">{$item.value|htmlentities}</textarea>
                                        {/case}
                                        {case editor}
                                        <textarea {$item.extend} name="row[{$item.name}]" class="form-control editor"
                                            data-rule="{$item.rule}" rows="5"
                                            data-tip="{$item.tip}">{$item.value|htmlentities}</textarea>
                                        {/case}
                                        {case array}
                                        <dl class="fieldlist" data-name="row[{$item.name}]">
                                            <dd>
                                                <ins>{:__('Array key')}</ins>
                                                <ins>{:__('Array value')}</ins>
                                            </dd>
                                            <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i
                                                        class="fa fa-plus"></i> {:__('Append')}</a></dd>
                                            <textarea name="row[{$item.name}]" cols="30" rows="5"
                                                class="hide">{$item.value|json_encode|htmlentities}</textarea>
                                        </dl>
                                        {/case}
                                        {case date}
                                        <input {$item.extend} type="text" name="row[{$item.name}]"
                                            value="{$item.value|htmlentities}" class="form-control datetimepicker"
                                            data-date-format="YYYY-MM-DD" data-tip="{$item.tip}"
                                            data-rule="{$item.rule}" />
                                        {/case}
                                        {case time}
                                        <input {$item.extend} type="text" name="row[{$item.name}]"
                                            value="{$item.value|htmlentities}" class="form-control datetimepicker"
                                            data-date-format="HH:mm:ss" data-tip="{$item.tip}"
                                            data-rule="{$item.rule}" />
                                        {/case}
                                        {case datetime}
                                        <input {$item.extend} type="text" name="row[{$item.name}]"
                                            value="{$item.value|htmlentities}" class="form-control datetimepicker"
                                            data-date-format="YYYY-MM-DD HH:mm:ss" data-tip="{$item.tip}"
                                            data-rule="{$item.rule}" />
                                        {/case}
                                        {case number}
                                        <input {$item.extend} type="number" name="row[{$item.name}]"
                                            value="{$item.value|htmlentities}" class="form-control"
                                            data-tip="{$item.tip}" data-rule="{$item.rule}" />
                                        {/case}
                                        {case checkbox}
                                        {foreach name="item.content" item="vo"}
                                        <label for="row[{$item.name}][]-{$key}"><input id="row[{$item.name}][]-{$key}"
                                                name="row[{$item.name}][]" type="checkbox" value="{$key}"
                                                data-tip="{$item.tip}" {in name="key" value="$item.value"
                                                }checked{/in} />
                                            {$vo}</label>
                                        {/foreach}
                                        {/case}
                                        {case radio}
                                        {foreach name="item.content" item="vo"}
                                        <label for="row[{$item.name}]-{$key}"><input id="row[{$item.name}]-{$key}"
                                                name="row[{$item.name}]" type="radio" value="{$key}"
                                                data-tip="{$item.tip}" {in name="key" value="$item.value"
                                                }checked{/in} /> {$vo}</label>
                                        {/foreach}
                                        {/case}
                                        {case value="select" break="0"}
                                        {/case}
                                        {case value="selects"}
                                        <select {$item.extend} name="row[{$item.name}]{$item.type=='selects'?'[]':''}"
                                            class="form-control selectpicker" data-tip="{$item.tip}"
                                            {$item.type=='selects' ?'multiple':''}>
                                            {foreach name="item.content" item="vo"}
                                            <option value="{$key}" {in name="key" value="$item.value" }selected{/in}>
                                                {$vo}
                                            </option>
                                            {/foreach}
                                        </select>
                                        {/case}
                                       
                                        {case value="shuffling"}
                                        <div class="form-inline">
                                            <div class="input-group">
                                                <input id="c-images" data-rule="required" class="form-control" size="50"
                                                    name="row[shuffling_figure]" type="text"
                                                    value="{$item.value|htmlentities}">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span><button type="button" id="plupload-images"
                                                            class="btn btn-danger plupload" data-input-id="c-images"
                                                            data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                                            data-multiple="true" data-preview-id="p-images"><i
                                                                class="fa fa-upload"></i>
                                                            {:__('Upload')}</button></span>
                                                    <span><button type="button" id="fachoose-images"
                                                            class="btn btn-primary fachoose" data-input-id="c-images"
                                                            data-mimetype="image/*" data-multiple="true"><i
                                                                class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                </div>
                                                <span class="msg-box n-right" for="c-images"></span>
                                            </div>

                                            <!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
                                            <ul class="row list-inline plupload-preview" id="p-images" data-template="desctpl" data-name="row[shuffling_content]"></ul>

                                            <!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
                                            <textarea name="row[shuffling_content]" class="form-control hide"
                                                style="margin-top:5px;">{$item.content|htmlentities}</textarea>

                                            <!--这里自定义图片预览的模板 开始-->
                                            <script type="text/html" id="desctpl">
                                                <li class="col-xs-3">
                                                    <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
                                                        <img src="<%=fullurl%>" class="img-responsive">
                                                    </a>
                                                    <input type="text" name="row[shuffling_content][<%=index%>][title]" class="form-control" placeholder="{:__('title')}" value="<%=value?value['title']:''%>"/>
                                                    <input type="text" name="row[shuffling_content][<%=index%>][page]" class="form-control" placeholder="{:__('Jump path')}" value="<%=value?value['page']:''%>" style="margin:10px 0;"/>
                                                    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                                                </li>
                                            </script>
                                            <!--这里自定义图片预览的模板 结束-->
                                        </div>
                                        {/case}
                                         {case value="image" break="0"}{/case}
                                        {case value="images"}
                                        <div class="form-inline">
                                            <input id="c-{$item.name}" class="form-control" size="35"
                                                name="row[{$item.name}]" type="text" value="{$item.value|htmlentities}"
                                                data-tip="{$item.tip}">
                                            <span><button type="button" id="plupload-{$item.name}"
                                                    class="btn btn-danger plupload" data-input-id="c-{$item.name}"
                                                    data-mimetype="image/*"
                                                    data-multiple="{$item.type=='image'?'false':'true'}"
                                                    data-preview-id="p-{$item.name}"><i class="fa fa-upload"></i>
                                                    {:__('Upload')}</button></span>
                                            <span><button type="button" id="fachoose-{$item.name}"
                                                    class="btn btn-primary fachoose" data-input-id="c-{$item.name}"
                                                    data-mimetype="image/*"
                                                    data-multiple="{$item.type=='image'?'false':'true'}"><i
                                                        class="fa fa-list"></i> {:__('Choose')}</button></span>
                                            <ul class="row list-inline plupload-preview" id="p-{$item.name}"></ul>
                                        </div>
                                        {/case}
                                        {case value="file" break="0"}{/case}
                                        {case value="files"}
                                        <div class="form-inline">
                                            <input id="c-{$item.name}" class="form-control" size="35"
                                                name="row[{$item.name}]" type="text" value="{$item.value|htmlentities}"
                                                data-tip="{$item.tip}">
                                            <span><button type="button" id="plupload-{$item.name}"
                                                    class="btn btn-danger plupload" data-input-id="c-{$item.name}"
                                                    data-multiple="{$item.type=='file'?'false':'true'}"><i
                                                        class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                            <span><button type="button" id="fachoose-{$item.name}"
                                                    class="btn btn-primary fachoose" data-input-id="c-{$item.name}"
                                                    data-multiple="{$item.type=='file'?'false':'true'}"><i
                                                        class="fa fa-list"></i> {:__('Choose')}</button></span>
                                        </div>
                                        {/case}
                                        {case bool}
                                        <label for="row[{$item.name}]-yes"><input id="row[{$item.name}]-yes"
                                                name="row[{$item.name}]" type="radio" value="1"
                                                {$item.value?'checked':''} data-tip="{$item.tip}" />
                                            {:__('Yes')}</label>
                                        <label for="row[{$item.name}]-no"><input id="row[{$item.name}]-no"
                                                name="row[{$item.name}]" type="radio" value="0"
                                                {$item.value?'':'checked'} data-tip="{$item.tip}" /> {:__('No')}</label>
                                        {/case}
                                        {default /}{$item.value}
                                        {/switch}
                                    </div>
                                    <div class="col-sm-4"></div>
                                </div>

                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
            <div class="form-group layer-footer text-center">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                    <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                </div>
            </div>

        </form>
    </div>

</div>